<template>
		<s-layout id="layout" :title="''" :navbar="normal" leftIconColor="#ffffff" :autoBack="false"
		:leftIcon="leftIcon" :bgColor="state.bgColor" :tabbarshow='false'
		:titleStyle="{ color: '#FFF', fontSize: '32rpx' }">
	<view id="app" :style="{ backgroundImage: `url( ${baseUrl}/uploads/uniapp_image/staff/szmmbg.png)`, }">
		<view class="top">
			<view class="title">换绑手机号</view>
			<text>设置手机号后，您可以换绑新的手机号</text>
		</view>
		<view class="middle  ">
			<view class="passwrap">
				<view class="phone">已绑定手机号：188****2222</view>
				<view class="content">

					<uni-forms ref="resetPasswordRef" v-model="state.formData" :rules="state.rules" validateTrigger="bind">
                        <uni-forms-item name="mobile" :label="newphonebox == true?'新手机':'旧手机'">
							<uni-easyinput type="number" :placeholder="newphonebox == true?'请输入新手机号':'请输入旧手机号'" v-model="state.formData.mobile"
								:inputBorder="false">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="code" label="验证码">
							<uni-easyinput placeholder="请输入验证码" v-model="state.formData.code" :inputBorder="false"
								type="number" maxlength="4"> <template v-slot:right>
									<button class="ss-reset-button code-btn code-btn-start"
										:disabled="state.isMobileEnd" :class="{ 'code-btn-end': state.isMobileEnd }"
										@tap="getSmsCode('smsRegister', state.formData.mobile)">
										{{ getSmsTimer('smsRegister') }}
									</button>
								</template>
							</uni-easyinput>
						</uni-forms-item>
						<button class="submit" @tap="changeMobileNext" v-if="newphonebox == false">下一步</button>
						<button class="submit" @tap="changeMobileSubmit" v-if="newphonebox == true">确认换绑</button>
						
				
					</uni-forms>
				</view>
			</view>
		</view>
	</view>
	</s-layout>
</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import sheep from '@/sheep';
import { ref, reactive, unref,computed } from 'vue';
import { code, mobile } from '@/sheep/validate/form';
import { getSmsCode, getSmsTimer } from '@/sheep/hooks/useModal';
const resetPasswordRef = ref(null);
// 数据
const state = reactive({
	isMobileEnd: false, // 手机号输入完毕
	formData: {
		code: '', // 验证码
		mobile: ''
	},
	rules: {
		code,
		mobile
	},
});
const isLogin = computed(() => sheep.$store('user').isLogin);
const bgColor = ref('transparent')
// 4.解绑手机号
const changeMobileNext = async () => {
		const validate = await unref(resetPasswordRef)
			.validate()
			.catch((error) => {
			});
		if (!validate) return;
	
	// if (resetPasswordRef.value != "") {
	// 	console.log('hkhkhkhklh')
	// 	resetPasswordRef.value.resetFields(); //重置表单
	// 	}
	// resetPasswordRef.value.resetFields()
	// uni.showToast({
	// 	title: '修改成功',
	// 	icon: "none"
	// });
	// sheep.$api.user.resetPassword(state.formData).then((res) => {
	//   if (res.code === 1) {
	//     sheep.$store('user').getInfo();
	// newphonebox.value = true
	// state.formData.mobile = ''
	// state.formData.code = ''
	// resetPasswordRef.value.clearValidate();
	  
	//   }
	// });
};
//换绑新手机号
const changeMobileSubmit = async () => {
		const validate = await unref(resetPasswordRef)
			.validate()
			.catch((error) => {
			});
		if (!validate) return;

	

	// uni.showToast({
	// 	title: '修改成功',
	// 	icon: "none"
	// });
	// sheep.$api.user.resetPassword(state.formData).then((res) => {
	//   if (res.code === 1) {
	//     sheep.$store('user').getInfo();
	  
	//   }
	// });
};
const  newphonebox = ref(false)
</script>

<style lang="scss">
@import '../auth/components/login.scss';
.middle{
	background: transparent;
    
}
.top{
    // width: 370rpx;
    height: 400rpx;
}
.passwrap {
	width: 94%;
	border-radius: 20rpx 20rpx 0 0;
	box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.05);
	background: $uni-bg-color;
	min-height: 720rpx;
	margin: 0 auto;

	.phone {
		border-radius: 20rpx 20rpx 0 0;
		height: 104rpx;
		line-height: 104rpx;
		padding-left: 40rpx;
		font-family: PingFangSC;
		color: $uni-text-color;
		font-weight: $uni-font-weight;
		font-size: $uni-font-size-big;
		background: #F4F6FA;
	}
.content{
    .submit{
        margin-top: 35rpx;
    }
}
}
:deep(.u-icon__icon) {
	background: #3333336e;
	width: 64rpx;
	height: 64rpx;
	justify-content: center;
	border-radius: 50%;
}
</style>